<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>Examples</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link rel="stylesheet" href="../../stylesheets/usual_class.css">
	<link rel="stylesheet" href="./css/mager_select.css">
	<!-- angular -->
	<script src="../../js/angular-1.5.7.js"></script>
	<script src="../../js/angular-ui-router.min.js"></script>
	<script src="./js/angular_init.js"></script>
	<script src="./js/app_ctrl.js"></script>
	<script src="./js/farmer_ctrl.js"></script>
	<script src="./js/farm_mager_ctrl.js"></script>
	<script src="./js/lib.js"></script>
	<!-- markdown -->
	<script src="js/markdown.min.js"></script>
	<!-- map -->
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=cc72db5d6f8295a36c30486830468a93"></script>
	<script src="../../js/qiniu.js"></script>
    <script src="../../js/plupload.full.min.js"></script>

	<style>
	body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		text-size-adjust: 100%;
		background-color: #f1f1f1;
		font: normal 100%/1.4 sans-serif;
		font-family: 'Microsoft Yahei', Georgia, "Times New Roman", Times, serif;
        font-size: 14px;
        color: #2c3e50;
	}
	</style>
</head>

<body ng-app="mager">
	<div class="d-n">
		<svg>
			<symbol id="icon-menu" viewBox="0 0 16 16">
				<title>menu</title>
				<path class="path1" d="M1 3h14v3h-14zM1 7h14v3h-14zM1 11h14v3h-14z"></path>
			</symbol>
			<symbol id="icon-circle-right" viewBox="0 0 16 16">
				<title>circle-right</title>
				<path class="path1" d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"></path>
				<path class="path2" d="M5.543 11.043l1.414 1.414 4.457-4.457-4.457-4.457-1.414 1.414 3.043 3.043z"></path>
			</symbol>
		</svg>
	</div>
	<!-- -----------------------------------mark---------------------------- -->
	<div class="mark-b d-n"></div>
	<!-- -------------------------------------slidebar--------------------------- -->
	<div class="bg-purple" id="slidebar">
		<div class="btn-home lh56 plr16 c-purple">
			<span class="mr16 fs16">返回</span>
			<div style="border-color: rgba(0,0,0,0);">
				<svg class="icon fs24">
					<use xlink:href="#icon-circle-right"></use>
				</svg>
			</div>
		</div>
		<details class="slide-down">
			<summary class="pl16 c-text-w">农民</summary>
			<ul class="menu">
				<li><a ui-sref="farmer__plant.farmer__plant__plant_msg">种植</a></li>
			</ul>
		</details>
		<details class="slide-down">
			<summary class="pl16 c-text-w">农场管理员</summary>
            <ul class="menu">
				<li><a ui-sref="farm_mager__pub_area">发布土地</a></li>
                <li><a ui-sref="farm_mager__pub_server_pck">发布种子方案</a></li>
                <li><a ui-sref="farm_mager__pub_seed_case.farm_mager__pub_seed_case__seed_list">发布服务包</a></li>
            </ul>
        </details>
        <details class="slide-down">
            <summary class="pl16 c-text-w">APP管理员</summary>
            <ul class="menu">
                <li><a ui-sref="app_mager__intro">园区介绍</a></li>
				<li><a ui-sref="app_mager__plant_science">作物科普</a></li>
				<!-- <li><a href="#">地图科普</a></li> -->
			</ul>
		</details>
	</div>
	<!-- -----------------------------------appbar---------------------------------------- -->
	<div class="container appbar bg-cyan c-text-w" ng-controller="mager_msg">
		<div class="w72">
			<div class="pl16 lh40" id="btn_slidebar">
				<svg class="icon icon24">
					<use xlink:href="#icon-menu"></use>
				</svg>
			</div>
		</div>
		<div class="flex1">
			<p class="fs16 c-text-w cs-p" ui-sref='main_select'>乐农</p>
		</div>
		<div class="pr16">
			<span class="mr16">欢迎你，管理员：<span ng-bind="mager.name"></span></span>
			<button class="btn bg-blue" ng-click="mager.logout()">退出登录</button>
		</div>
	</div>
	<!-- <a ui-sref="farmer_plant">asd</a> -->
	<div class="container">
		<ui-view>Loading</ui-view>
	</div>
</body>
<script>
// -------------------------------------------conponment-----------------------------------------------

(function() {
	/*-----------
		   slidebar
	   -----------*/
	var slidebar = document.getElementById('slidebar');
	var btn_home = slidebar.querySelector('.btn-home');
	var btn_slidebar = document.getElementById('btn_slidebar');
	btn_slidebar.onclick = function(ev) {
		slidebar.classList.toggle('slidebar-toggle');
		mark_auto('.mark-b');
	};
	btn_home.onclick = function(ev) {
		slidebar.classList.toggle('slidebar-toggle');
		mark_auto('.mark-b');
	};
})();

// ----------------------------------------------mark---------------------------------------------------
/**
 * 对Mark多对多映射的处理
 * @param  {[type]} markName [description]
 * @return {[type]}          [description]
 */
function mark_auto(markName) {
	var mark = document.querySelector(markName);
	/**
	 * mark样式切换
	 * @param  {[type]} mark.classList.contains('d-n') [description]
	 * @return {[type]}                                [description]
	 */
	if (mark.classList.contains('d-n')) {
		mark.classList.remove('d-n');
		mark.classList.add('d-b');
	} else {
		mark.classList.remove('d-b');
		mark.classList.add('d-n');
	}
}

/**
 * 注册需要mark退出效果的id
 * @return {[type]} [description]
 */
function regi_mark() {
	var ids = [];
	return function(id) {
		if (id) {
			ids.push(id);
		}
		return ids;
	}
}

(function() {
	/**
	 * 先注册id
	 *
	 * @type {[type]}
	 */
	var regi = regi_mark();
	regi('slidebar');
	var elem = [];
	var reg = /toggle/;
	console.log(regi());
	var regied_id = regi();
	/**
	 * 寻找id对应的元素
	 * @param  {[type]} var i             [description]
	 * @return {[type]}     [description]
	 */
	for (var i = regied_id.length - 1; i >= 0; i--) {
		try {
			elem.push(document.getElementById(regied_id[i]));
		} catch (err) {
			console.log(err);
			return false;
		}
	}

	mark_ani('.mark-b');

	/**
	 * mark一对多交互效果
	 * @param  {[type]} markName [description]
	 * @return {[type]}          [description]
	 */
	function mark_ani(markName) {

		var mark = document.querySelector(markName);
		try {
			mark.onclick = function() {
				this.classList.remove('d-b');
				this.classList.add('d-n');
				for (var i = elem.length - 1; i >= 0; i--) {
					var className = elem[i].className;
					// console.log(className)
					/**
					 * 是否为触发状态
					 * @param  {[type]} reg.test(className) [description]
					 * @return {[type]}                     [description]
					 */
					if (reg.test(className)) {
						/**
						 * 寻找触发状态类
						 * @param  {[type]} var j             [description]
						 * @return {[type]}     [description]
						 */
						for (var j = elem[i].classList.length - 1; j >= 0; j--) {
							var elemClassName = elem[i].classList[j];
							/**
							 * 去除触发状态
							 * @param  {[type]} reg.test(elemClassName) [description]
							 * @return {[type]}                         [description]
							 */
							if (reg.test(elemClassName)) {
								elem[i].classList.remove(elemClassName);
								break;
							}
						}
					} else {
						console.log('not in toggle')
						return false;
					}
				}
			};
		} catch (err) {
			console.log(err)
			return false;
		}

	}

})();
</script>

</html>
